<template>
  <el-container>
    <!--左侧-->
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="menuTitle">晨希云客管理系统</div>
      <el-menu
          active-text-color="#ffd04b"
          background-color="#334157"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          style="border-right: solid 0px"
          :collapse="isCollapse"
          :collapse-transition="false"
          :router="true"
          :unique-opened="true">

        <!--市场活动菜单-->
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <OfficeBuilding/>
            </el-icon>
            <span>市场活动</span>
          </template>
          <el-menu-item index="1-1">
            <el-icon>
              <Guide/>
            </el-icon>
            市场活动
          </el-menu-item>
        </el-sub-menu>

        <!--线索管理菜单-->
        <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Search/>
            </el-icon>
            <span>线索管理</span>
          </template>
          <el-menu-item index="2-1">
            <el-icon>
              <Aim/>
            </el-icon>
            线索管理
          </el-menu-item>
        </el-sub-menu>

        <!--客户管理菜单-->
        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <User/>
            </el-icon>
            <span>客户管理</span>
          </template>
          <el-menu-item index="3-1">
            <el-icon>
              <Coordinate/>
            </el-icon>
            客户管理
          </el-menu-item>
        </el-sub-menu>

        <!--交易管理菜单-->
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <Tickets/>
            </el-icon>
            <span>交易管理</span>
          </template>
          <el-menu-item index="4-1">
            <el-icon>
              <NoSmoking/>
            </el-icon>
            交易管理
          </el-menu-item>
        </el-sub-menu>

        <!--产品管理菜单-->
        <el-sub-menu index="5">
          <template #title>
            <el-icon>
              <Iphone/>
            </el-icon>
            <span>产品管理</span>
          </template>
          <el-menu-item index="5-1">
            <el-icon>
              <Cellphone/>
            </el-icon>
            产品管理
          </el-menu-item>
        </el-sub-menu>

        <!--字典管理菜单-->
        <el-sub-menu index="6">
          <template #title>
            <el-icon>
              <Collection/>
            </el-icon>
            <span>字典管理</span>
          </template>
          <el-menu-item index="6-1">
            <el-icon>
              <Reading/>
            </el-icon>
            字典管理
          </el-menu-item>
        </el-sub-menu>

        <!--用户管理菜单-->
        <el-sub-menu index="7">
          <template #title>
            <el-icon>
              <Avatar/>
            </el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/dashboard/user">
            <el-icon>
              <Headset/>
            </el-icon>
            用户管理
          </el-menu-item>
        </el-sub-menu>

        <!--系统管理菜单-->
        <el-sub-menu index="8">
          <template #title>
            <el-icon>
              <Cpu/>
            </el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="8-1">
            <el-icon>
              <Monitor/>
            </el-icon>
            系统管理
          </el-menu-item>
        </el-sub-menu>

      </el-menu>

    </el-aside>
    <!--右侧-->
    <el-container class="rightContent">
      <!--右侧上-->
      <el-header>
        <el-icon class="show" @click="showMenu">
          <Fold/>
        </el-icon>

        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            {{ user.name }}
            <el-icon class="el-icon--right"><arrow-down/></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>我的资料</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </el-header>
      <!--右侧中-->
      <el-main>
        <router-view v-if="isRouterAlive"/>
      </el-main>
      <!--右侧下-->
      <el-footer>此版由程光民于二五年制作</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import {doGet} from "../http/httpRequest.js";
import {messageConfirm, messageTip, removeToken} from "../util/util.js";
import {defineComponent} from "vue";

export default defineComponent({
  //定义组件名
  name: "DashboardView",

  data() {
    return {
      //控制左侧菜单左右的展开与折叠，true是折叠，false是展开
      isCollapse: false,
      //登录用户对象,初始值为空
      user: {},
      //控制仪表盘页面右侧内容体是否显示
      isRouterAlive : true
    }
  },

  //提供者（生产者）
  provide() {
    return {
      //提供一个函数（要求是箭头函数）
      reload: ()=> {
        this.isRouterAlive = false; //右侧内容隐藏
        this.$nextTick(() => { //$nextTick(), 当数据更新了，在dom中渲染后，自动执行该函数，
          this.isRouterAlive = true;
        })
      },

      //提供一个字符串
      content: "是对负荷计算东方红郡凯撒的合法户籍卡",

      //提供一个数字
      age: 28,

      //提供一个对象
      user : {id: 1098, name: "张三", age: 18},

      //提供一个数组
      arr : [12, 56, 109, 356, 8901]

      //......
    }
  },

  //vue的生命周期中的一个函数钩子，该钩子是在页面渲染后执行
  mounted() {
    //加载当前登录用户
    this.loadLoginUser();
  },

  methods: {
    //左侧菜单展开与折叠
    showMenu() {
      this.isCollapse = !this.isCollapse
    },

    //加载当前登录用户
    loadLoginUser() {
      doGet("/api/login/info", {}).then((resp) => {
        console.log(resp)
        this.user = resp.data.data;
      })
    },

    //退出登录
    logout() {
      doGet("/api/logout", {}).then(resp => {
        if (resp.data.code === 200) {
          removeToken();
          messageTip("退出成功", "success");
          //跳到登录页
          window.location.href = "/";
        } else {
          messageConfirm("退出异常,是否强制退出？")
              .then(() => { //用户点击"确定"按钮就会出发then函数
                //既然后端验证token未通过，那么前端的token肯定是有问题的，那么就没必要存储在浏览器当中，直接删除
                removeToken();
                //跳到登录页
                window.location.href = "/";
              })
              .catch(() => {//用户点击"取消"按钮就会出发then函数
                messageTip("取消强制退出", "warning");
              })
        }
      })
    }
  }
})
</script>

<style scoped>
.el-aside {
  background: #1a1a1a;
}

.el-header {
  background: azure;
  height: 30px;
  line-height: 30px;
}

.el-footer {
  background: aliceblue;
  height: 30px;
  line-height: 30px;
  text-align: center;
}

.rightContent {
  height: calc(100vh);
}

.menuTitle {
  height: 30px;
  line-height: 30px;
  color: #f9f9f9;
  text-align: center;
}

.show {
  cursor: pointer;
}

.el-dropdown {
  float: right;
  line-height: 30px;
}
</style>